import React, { Component, PureComponent } from 'react';
import { Tab, Table, Loading, Message } from '@alifd/next';
import DataBinder from '@icedesign/data-binder';
import './BasicDetailInfo.scss';


@DataBinder({
  moneyBack: {
    url: 'http://10.10.37.57:4444/mock/paymentPlan.json',
    type: 'post',
  },
  returnVisit: {
    url: 'http://10.10.37.57:4444/mock/returnVisit.json',
    type: 'post',
  },
})
export default class BasicDetailInfo extends PureComponent {
  static displayName = 'BasicDetailInfo';

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      activeKey: 0,
    };
  }

  componentWillUpdate() {
    //var link = document.getElementById('jiben');
    //link.click();
  }

  nbWrapper = (event) => {
    event.stopPropagation();
    console.log('点击wrapper')
  }

  changeTab = (key) => {
    console.log(key)
    this.setState({activeKey: key})
    const { moneyBack, returnVisit } = this.props.bindingData;
    let that = this;
    
    if (key == 1) {
      if (moneyBack && moneyBack.rows && moneyBack.rows.length > 0) {
        return false;
      } 
      this.setState({visible: true})
      this.props.updateBindingData('moneyBack');

    } else if (key == 3) {
      if (returnVisit && returnVisit.rows && returnVisit.rows.length > 0) {
        return false;
      }
      this.setState({visible: true})
      this.props.updateBindingData('returnVisit');
    }
    setTimeout(function(){
      that.setState({
        visible: false,
      })
    },500)
  }

  onResizeChange = (dataIndex, value) => {
      const {widths} = this.state;
      widths[dataIndex] = widths[dataIndex] + value;
      this.setState({
          widths
      });
  }

  handleClick = (key) => {
      console.log('click', key);
  }

  render() {
    const { hideShow, searchDetail, logList } = this.props;
    const { moneyBack, returnVisit } = this.props.bindingData;
    //console.log('searchDetail===',searchDetail)
    
    return (
      <div className="nb-detail-wrapper" onClick={this.nbWrapper}>
        <div className="nb-detail-content">
          <div className="detail-top-wrapper">
            <img src={require('./images/reservation.png')} />
            <div className="detail-title-wrappers">
              <div className="title">{searchDetail && searchDetail.no}</div>
              <div className="tips">
              <div style={{fontWeight: 300}}>
                <span>{searchDetail && searchDetail.productName}</span>
              </div>
              </div>
              <div className="footers">
              <section className="title-info-wrapper after-border">
                <div className="title-info" style={{width: 'auto'}}>
                <span>{searchDetail && searchDetail.customerName}</span>
                </div>
                <div className="desc">
                客户姓名
                </div>
              </section>
              <section className="title-info-wrapper after-border">
                <div className="title-info"  style={{width: 'auto'}}>
                {searchDetail && searchDetail.reservationAmountStr}
                </div>
                <div className="desc">
                预约金额
                </div>
              </section>
              <section className="title-info-wrapper after-border">
                <div className="title-info"  style={{width: 'auto'}}>
                {searchDetail && searchDetail.statusStr}
                </div>
                <div className="desc">
                状态
                </div>
              </section>
              </div>
            </div>
            <div className="button-wrapper">
              <section className="nb-button-wrapper text" style={{backgroundColor: 'rgb(217, 217, 217)'}} onClick={hideShow}>返回</section>
            </div>
          </div>
          <div className="detail-content-wrapper">

            <div className="detail-content-left">
              <Tab 
              navStyle={{backgroundColor: '#ffffff'}} 
              contentStyle={{backgroundColor: '#ffffff'}}
              onChange={this.changeTab}
              activeKey={this.state.activeKey}
              id="tab-basic-info"
              triggerType="click"
              >
                <Tab.Item title="基本信息" key={0}>
                  {
                    searchDetail ? (
                      <section className="fd-wrapper">
                        <section className="appear-wrapper">
                          <div className="item left">
                          <div className="titleApper">
                            预约单号
                          </div>
                          <div className="content">
                            <span>{searchDetail.no}</span>
                          </div>
                          </div>
                          <div className="item right">
                          <div className="titleApper">
                            预约产品
                          </div>
                          <div className="content">
                            <span>{searchDetail.productName}</span>
                          </div>
                          </div>
                        </section>
                        <section className="appear-wrapper">
                          <div className="item left">
                          <div className="titleApper">
                            预约金额
                          </div>
                          <div className="content">
                            <span>{searchDetail.reservationAmountStr}</span>
                          </div>
                          </div>
                          <div className="item right">
                          <div className="titleApper">
                            预计购买日期
                          </div>
                          <div className="content">
                            <span>{searchDetail.payDate}</span>
                          </div>
                          </div>
                        </section>
                        <section className="appear-wrapper">
                          <div className="item left">
                          <div className="titleApper">
                            客户姓名
                          </div>
                          <div className="content">
                            <span>{searchDetail.customerName}</span>
                          </div>
                          </div>
                          <div className="item right">
                          <div className="titleApper">
                            客户手机号
                          </div>
                          <div className="content">
                            <span>{searchDetail.mobile}</span>
                          </div>
                          </div>
                        </section>
                        <section className="appear-wrapper">
                          <div className="item left">
                          <div className="titleApper">
                            客户证件号码
                          </div>
                          <div className="content">
                            <span>{searchDetail.documentNo}</span>
                          </div>
                          </div>
                          <div className="item right">
                          <div className="titleApper">
                            提交预约服务时间
                          </div>
                          <div className="content">
                            <span>-</span>
                          </div>
                          </div>
                        </section>
                        <section className="appear-wrapper">
                          <div className="item left">
                          <div className="titleApper">
                            备注
                          </div>
                          <div className="content">
                            <span className="none-value">-</span>
                          </div>
                          </div>
                          <div className="item right">
                          <div className="titleApper">
                            状态
                          </div>
                          <div className="content">
                            <span>{searchDetail.statusStr}</span>
                          </div>
                          </div>
                        </section>
                        <section className="appear-wrapper">
                          <div className="item left">
                          <div className="titleApper">
                            咨询顾问
                          </div>
                          <div className="content">
                            <span>{searchDetail.faName}</span>
                          </div>
                          </div>
                          <div className="item right">
                          <div className="titleApper">
                            咨询顾问手机号
                          </div>
                          <div className="content">
                            <span>{searchDetail.faMobile}</span>
                          </div>
                          </div>
                        </section>
                        <section className="appear-wrapper">
                          <div className="item left">
                          <div className="titleApper">
                            外部咨询顾问
                          </div>
                          <div className="content">
                            <span className="none-value">-</span>
                          </div>
                          </div>
                          <div className="item right">
                          <div className="titleApper">
                            外部咨询顾问手机号
                          </div>
                          <div className="content">
                            <span className="none-value">-</span>
                          </div>
                          </div>
                        </section>
                        <section className="appear-wrapper">
                          <div className="item left">
                          <div className="titleApper">
                            实际签约金额
                          </div>
                          <div className="content">
                            <span>{searchDetail.reservationAmountStr}</span>
                          </div>
                          </div>
                          <div className="item right">
                          <div className="titleApper">
                            签约日期
                          </div>
                          <div className="content">
                            <span>-</span>
                          </div>
                          </div>
                        </section>
                        <section className="appear-wrapper">
                          <div className="item left">
                          <div className="titleApper">
                            纸质合同编号
                          </div>
                          <div className="content">
                            <span>{searchDetail.contractNo}</span>
                          </div>
                          </div>
                          <div className="item right">
                          <div className="titleApper">
                            打款日期
                          </div>
                          <div className="content">
                            <span>{searchDetail.payDate}</span>
                          </div>
                          </div>
                        </section>
                        <section className="appear-wrapper">
                          <div className="item left">
                          <div className="titleApper">
                            起息日
                          </div>
                          <div className="content">
                            <span>{searchDetail.repayList && searchDetail.repayList[0].startDate}</span>
                          </div>
                          </div>
                          <div className="item right">
                          <div className="titleApper">
                            到期日
                          </div>
                          <div className="content">
                            <span>{searchDetail.repayList && searchDetail.repayList[0].endDate}</span>
                          </div>
                          </div>
                        </section>
                        <section className="appear-wrapper">
                          <div className="item left">
                          <div className="titleApper">
                            期待回报(元)
                          </div>
                          <div className="content">
                            <span>{searchDetail.repayList && searchDetail.repayList[0].repayAmount}</span>
                          </div>
                          </div>
                        </section>
                      </section>
                    ) : ""
                  }
                </Tab.Item>
                <Tab.Item title="回款计划" key={1}>
                  <Loading visible={this.state.visible} shape="fusion-reactor" style={{width: '100%'}}>
                    <section>
                      <p className="title">注 : 发布回款计划后，咨询顾问、投资人才可在移动端查看期待回报</p>
                      <Table
                          dataSource={moneyBack && moneyBack.rows}
                          hasBorder={true}
                          className="custom-table"
                          rowSelection={{onChange: () => {}}}
                          onResizeChange={this.onResizeChange}
                          >
                          <Table.Column 
                              title="预计回款日期" 
                              dataIndex="repayDate"
                          />
                          <Table.Column title="计息天数(天)" dataIndex="days"/>
                          <Table.Column title="回款本金(元)" dataIndex="repayCapital" />
                          <Table.Column title="回款收益(元)" dataIndex="repayAmount" />
                          <Table.Column title="回款总额(元)" dataIndex="capitalIncomeAmount" />
                          <Table.Column
                            
                              title="回款状态"
                              dataIndex="statusStr"
                          />
                          <Table.Column
                            
                              title="发布状态"
                              dataIndex="releaseStatusStr"
                          />
                          
                      </Table>
                    </section>
                  </Loading>

                </Tab.Item>
                <Tab.Item title="附件信息" key={2}>
                  <Loading visible={this.state.visible} shape="fusion-reactor" style={{width: '100%',backgroundColor: '#ffffff'}}>
                    <div style={{width: '100%',height: '100px',color: '#333333',textAlign:'center',lineHeight:'100px',fontSize: '15px'}}>
                    注：咨询顾问或投资人上传的附件可被锁定，锁定后的附件不可通过移动端删除
                    </div>
                  </Loading>
                </Tab.Item>
                <Tab.Item title="回访记录" key={3}>
                  <Table
                      dataSource={returnVisit && returnVisit.rows}
                      hasBorder={true}
                      rowSelection={{onChange: () => {}}}
                      onResizeChange={this.onResizeChange}
                      loading={this.state.visible}
                      >
                      <Table.Column 
                          title="回访时间" 
                          dataIndex="returnDate"
                      />
                      <Table.Column title="操作人" dataIndex="operator"/>
                      <Table.Column title="回访方式" dataIndex="returnType" />
                      <Table.Column title="回访结果" dataIndex="returnResult" />
                      <Table.Column title="备注" dataIndex="remarks" />
                  </Table>
                </Tab.Item>
              </Tab>
            </div>

            <div className="detail-content-right">
              <section className="offside-wrapper">
                <div className="title">
                  动态
                </div>
                <div className="content">
                  <section className="record-cons ">
                  <div className="list-wrapper">
                    {
                      logList && logList.list && logList.list.length > 0 && logList.list.map((item) => {
                        return (
                          <div className="record-con-div" key={item.id}>
                            <img src={require('./images/customerDefault.png')} />
                            <div className="record-con">
                              <div className="user-name">{item.createdName}</div>
                              <div className="con-detail">{item.content}</div>
                              <div className="record-time">{item.createTime}</div>
                            </div>
                          </div>
                        )
                      })
                    }
                  </div>
                  <div className="load-more"> 
                  </div>
                  </section>
                </div>
              </section>
            </div>
          </div>
        </div>
      </div>
    );
  }
}